<!--
 * @Author: liyin 2179253556@qq.com
 * @Date: 2023-02-16 10:45:27
 * @LastEditors: liyin 2179253556@qq.com
 * @LastEditTime: 2023-02-16 15:49:38
 * @FilePath: \test\src\components\Dormitory.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
    <div class="dormit-flex-box">
        <div class="dormit-top-image-box">
            <div class="title">
                <van-row class="row color-white">
                    <van-col :span="12">当前宿舍累计分数</van-col>
                    <van-col :span="12">
                        <van-row justify="end">
                            <div class="score-domit-box">
                                -6<span>分</span>
                            </div>
                        </van-row>
                    </van-col>
                </van-row>
            </div>
            <Card style="border-radius: 5px;">
                <div class="info-box row">
                    <div class="icon-flex-box row">
                        <span class="icon iconfont icon-icon_sushe"></span>
                    </div>
                    <div class="info-flex-box flex1">
                        <div>至礼楼-1F-101寝室</div>
                        <div class="row">
                            <van-icon name=" iconfont icon-ic_user_full_2" />
                            <span>6人</span>
                            <span class="icon iconfont icon-ic_women_line" style="color:#FF60A5;"></span>
                        </div>
                    </div>
                    <div class="right-flex-box">
                        <van-button round type="default" size="small" style="font-size:14px;" plain
                            color="#999">评分纪录</van-button>
                    </div>
                </div>
            </Card>
        </div>
        <Card padbottom="0">
            <van-row style="margin-bottom:15px;">
                <van-col :span="24">选择加分或扣分</van-col>
            </van-row>
            <Button margin type="dangerPrimary">扣分</Button>
            <Button margin type="plain">加分</Button>
        </Card>
        <Card padbottom="0">
            <van-row style="margin-bottom:15px;">
                <van-col :span="24">选择扣分类别</van-col>
            </van-row>
            <Button margin type="dangerPrimary">内务评分</Button>
            <Button margin>纪律评分</Button>
        </Card>
        <Card>
            <van-row style="margin-bottom:15px;">
                <van-col :span="24">选择加/扣分原因</van-col>
            </van-row>
            <van-field background-color="f9f9f9" v-model="result" is-link readonly name="picker" label="请选择"
                @click="showPicker = true" />
        </Card>
        <Card>
            <van-row style="margin-bottom:15px;">
                <van-col class="row" :span="24">
                    <van-icon class="iconfont margin-right10" class-prefix='icon' name='icon_daichuli' size="20"
                        color="#649FFF" />
                    输入其他原因
                </van-col>
            </van-row>
            <van-field v-model="placeName" rows="2" autosize type="textarea" placeholder="输入其他原因" />
        </Card>
        <Card padbottom="0">
            <van-row style="margin-bottom:15px;">
                <van-col class="row" :span="24">
                    请选择分值
                </van-col>
            </van-row>
            <van-row :gutter="15">
                <van-col :span="6" v-for="(item, index) in 8" :key="index">
                    <Button row style="width:100%;padding-top: 10px;padding-bottom: 10px;margin-bottom: 15px;"
                        type="default">{{ index+ 0.5}}分</Button>
                </van-col>
            </van-row>
        </Card>
        <div class="fixed-flex-box">
            <Button padding block round color="#3D7FFF">提交评分</Button>
        </div>
        <!-- 扣分通知弹窗 -->
        <ResultModel :modelShow="modelShow"></ResultModel>
    </div>
    <!-- 选择原因弹窗 -->
    <van-action-sheet v-model:show="actionShow" title="请选择扣分原因">
        <div style="margin-top:10px;"><van-search v-model="key_word" shape="round" placeholder="请输入搜索扣分明细" /></div>
        <div class="check-list-box" :style="
            'max-height:' +
            ($util.getClientHeight() - 260) +
            'px;min-height: 300px;'
        ">
            <Card :bgColor="currentIndex == index ? '#EFF5FF' : '#F9F9F9'" v-for="(item, index) in 10"
                :key="index">
                <div class="rowTop" @click="selectIndex(index)">
                    <van-icon class="iconfont" class-prefix='icon'
                        :name="currentIndex == index ? 'icon_xaunzhong' : 'ic_checkbox_circle_empty'" size="18"
                        :color="currentIndex == index ? '#3D7FFF' : '#E0DFE2'" style="margin-top:3px;" />
                    <div class="flex1 margin-left15">室内地板、冲凉房、厕所（有异味）、洗衣台、门窗玻璃、窗台、走廊不清洁、 未倒垃圾等，每一项扣 1</div>
                </div>
            </Card>
            <div style="height:100px;"></div>
        </div>
        <div class="fixed-flex-btn">
            <Button padding block round color="#3D7FFF">保 存</Button>
        </div>
    </van-action-sheet>
</template>
<script lang="ts" setup>
import { ref, reactive, onMounted, nextTick, onUnmounted } from 'vue'
import $util from '../util/util'
import { useStore } from 'vuex'
import { useRoute, useRouter } from 'vue-router'
import { Dialog, Toast } from 'vant'
const store = useStore()
const route = useRoute()
const result = ref('');
const placeName = ref('');
const showPicker = ref(false);
const modelShow = ref(false)
const actionShow = ref(true)
const key_word = ref('')
const currentIndex = ref(-1)
const selectIndex = (Index: number) => {
    currentIndex.value = Index
}
onMounted(() => {
})
</script>
<style lang="scss" scoped>
.dormit-flex-box {
    padding: 15px;

    .dormit-top-image-box {
        padding: 5px;
        background: #29b386;
        border-radius: 10px;
        background-image: url('../assets/images/ikon_wenli.png');
        background-size: 100% 100%;
    }

    .title {
        padding: 10px 5px 0 5px;
    }

    .info-box {
        .icon-flex-box {
            width: 45px;
            height: 45px;
            background: #FAFAFA;
            border: 1px solid #C8C8C8;
            border-radius: 50%;
            display: flex;
            justify-content: center;
            align-items: center;

            span {
                color: #C8C8C8;
                font-size: 28px;
            }
        }

        .info-flex-box {
            margin-left: 15px;

            div:last-of-type {
                font-size: 14px;
                color: #999999;
                margin-top: 5px;

                span:first-of-type {
                    margin-left: 5px;
                    margin-right: 10px;
                }
            }
        }

        .right-flex-box {
            color: #FF5B44;
        }
    }

    .fixed-flex-box {
        margin: 30px 15%;
    }

    :deep(.van-cell) {
        background-color: #f9f9f9;
        font-size: 16px;
        padding-top: 18px;
        padding-bottom: 18px;
        border-radius: 5px;
    }
}

.check-list-box {
    font-size: 14px;
    padding: 0 20px;
}

.fixed-flex-btn {
    width: 100%;
    position: fixed;
    bottom: 0;
    background: #FFFFFF;
    border-top: 1px solid #f7f7f7;
    padding: 15px 15% 0 15%;
    box-sizing: border-box;
}
</style>
